Related issues

Closes STU-912

Proposed Changes

This PR adds a modal with call to action for users that don't have any WP.com sites:

Original design: RToz6tIuQ7nlZrikBte4GU-fi-10114_134320 (minus the image on the top as we are not supposed to have the image there.

I made a small change to the design with the modal title:

• firstly, we should not really use the logo in the title, it does not work well as it is too large to use with the default title size and it does not work with that type
• we could do the logo in the title but we need to do some CSS to achieve that look (which I can do if we really want that)
• I was trying to find a simpler solution that features the logo but does not require a whole lot of customizations (this is open for discussion along with the copy)

Testing Instructions

• Pull the changes from this branch
• Apply the following diff

index cc226545..5e39a4cd 100644
--- a/src/hooks/use-fetch-wpcom-sites/index.tsx
+++ b/src/hooks/use-fetch-wpcom-sites/index.tsx
@@ -233,8 +233,9 @@ export const useFetchWpComSites = ( connectedSiteIdsOnlyForSelectedSite: number[
                [ rawSyncSites, memoizedConnectedSiteIds ]
        );
        return {
-               syncSites: syncSitesWithSyncSupportForSelectedSite,
+               syncSites: [],
                isFetching: isFetchingSites.current,
                refetchSites: fetchSites,
        };

• Navigate to Sync tab
• Click on Connect site
• See the loading state on the button (this is new because instead of fetching the WP.com sites in the sync modal and seeing the loading state there, we are fetching them first and then deciding which modal to fetch)
• Confirm that you can see the modal for no sites appear
• Remove the diff that you applied
• Click on the button again
• Confirm that you see the sync modal

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?